import React from 'react';
import './Login.less';
import { Form, Icon, Input, Button,Spin, message } from 'antd';
import {withRouter, Redirect} from "react-router-dom";
import {accountLogin} from "../../service/api";
import md5 from 'blueimp-md5';
const FormItem = Form.Item;

class Login extends React.Component {

    state = {
        loading: false,
        user: localStorage.getItem('user')
    }
    handleSubmit = (e) => {
        e.preventDefault();
        let self = this;
        self.setState({loading: true});
        const from = self.state.from || { from: { pathname: "/" } };
        this.props.form.validateFields((err, values) => {
            if (!err) {
                values.password = md5(values.password)
                accountLogin(values).then(function (data) {

                    if(data.code === 200){
                        // self.props.history.push("/");
                        localStorage.setItem('user', data.data.token);
                        localStorage.setItem('permissions', JSON.stringify(data.data.permissions));
                        localStorage.setItem('username', data.data.userName)
                        window.location.href = from.from.pathname;

                    }else{
                        message.error(data.msg);
                        self.setState({loading: false});
                    }


                })
                    .catch(function (err) {
                        console.log(err)
                    })
            }else{
                self.setState({loading: false});
            }
        });
    }
    componentDidMount () {
        // localStorage.removeItem('auth')
        // this.props.history.push("/");
    }
    render(){
        if(this.state.user){
            return(
                <Redirect to='/' />
            )
        }

        const { getFieldDecorator } = this.props.form;
        return (
            <div className="loginPage">
                <div className="loginTitle">
                    后台登录
                </div>
                <div className="loginForm">
                    <Spin spinning={this.state.loading}>
                        <Form onSubmit={this.handleSubmit}>
                            <FormItem>
                                {getFieldDecorator('username', {
                                    rules: [{ required: true, message: '请填写用户名!' }],
                                })(
                                    <Input autoFocus prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户名" />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('password', {
                                    rules: [{ required: true, message: '请填写密码!' }],
                                })(
                                    <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
                                )}
                            </FormItem>
                            <FormItem>
                                <Button type="primary" htmlType="submit">
                                    登录
                                </Button>
                            </FormItem>
                        </Form>
                    </Spin>
                </div>
            </div>
        )
    }
}

const LoginWrap = Form.create()(Login);
export default withRouter(LoginWrap);
